import React, { useState, useEffect } from 'react'
import { View, Text, TouchableOpacity, Image } from 'react-native'
import AntDesign from 'react-native-vector-icons/AntDesign'
import JShareModule from 'jshare-react-native'
import * as WeChat from 'react-native-wechat-lib'
import styles from './styles'

const iconWechat = require('@/assets/images/login/wechat.png')
const iconWeibo = require('@/assets/images/login/weibo.png')
const iconTimeline = require('@/assets/images/login/timeline.png')
const iconQQ = require('@/assets/images/login/qq.png')

const ShareBox = props => {

  const _sharApp = type => {
    switch (type) {
      case 'wechat': {
        // _shareWeixinMessage()
        _shareWeixin()
        break
      }
      case 'timeline': {
        _shareWeixinFriend()
        break
      }
      case 'weibo': {
        _shareWeibo()
        break
      }
      case 'qq': {
        _shareQQ()
        break
      }
      default: {
        _shareWeixinMessage()
        break
      }
    }
    props.onClose && props.onClose()
  }
  // 微博
  const _shareWeibo = () => {
    const { title, desc, cover, id } = props
    const shareParams = {
      type: 'link',
      platform: 'sina_weibo',
      title: title || '川体在线',
      text: desc || '川体在线',
      imageUrl: cover || 'http://chuanti-bucket.oss-cn-chengdu.aliyuncs.com/img/chuanti_head_img.png?x-oss-process=image/resize,l_100,m_mfit',
      url: `https://wap.sctynews.cn/#/newsDetail/${id}`
    }
    JShareModule.share(shareParams, res => {
      console.log('weibo success:')
    }, err => {
      console.log('weibo failed:', err)
    })
  }
  // 微信消息
  const _shareWeixin = () => {
    const { title, desc, cover, id } = props
    WeChat.shareWebpage({
      title: title,
      description: desc,
      thumbImageUrl: cover,
      webpageUrl: `https://wap.sctynews.cn/#/newsDetail/${id}`,
      scene: 0 //0:会话 1:朋友圈 2:收藏
    }, (errcode , errstr) => {
      console.log(errcode, errstr)
    })
  }

  // 朋友圈
  const _shareWeixinFriend = () => {
    const { title, desc, cover, id } = props
    WeChat.shareWebpage({
      title: title,
      description: desc,
      thumbImageUrl: cover,
      webpageUrl: `https://wap.sctynews.cn/#/newsDetail/${id}`,
      scene: 1 //0:会话 1:朋友圈 2:收藏
    }, (errcode , errstr) => {
      console.log(errcode, errstr)
    })
  }

  const _shareQQ = () => {
    const { title, desc, cover, id } = props
    const shareParams = {
      type: 'link',
      platform: 'qq',
      title: title || '川体在线',
      text: desc || '川体在线',
      imageUrl: cover || 'http://chuanti-bucket.oss-cn-chengdu.aliyuncs.com/img/chuanti_head_img.png?x-oss-process=image/resize,l_100,m_mfit',
      url: `https://wap.sctynews.cn/#/newsDetail/${id}`
    }
    JShareModule.share(shareParams, res => {
      console.log('qq success')
    }, err => {
      console.log('qq failed', err)
    })
  }

  const _close = () => {
    props.onClose && props.onClose()
  }

  return (
    <View style={styles.wrap}>
      <View style={styles.boxTitle}>
        <Text style={styles.boxTitleText}>分享到</Text>
        <View style={styles.close}>
          <AntDesign
            name="close"
            color="#666"
            size={20}
            onPress={_close}
          /></View>
      </View>
      <View style={styles.shareItems}>
        <View style={styles.itemBox}>
          <TouchableOpacity onPress={() => _sharApp('wechat')}>
            <Image style={styles.thridIcon} source={iconWechat}/>
            <View style={styles.titleBox}><Text style={styles.titleText}>微信</Text></View>
          </TouchableOpacity>
        </View>
        <View style={styles.itemBox}>
          <TouchableOpacity onPress={() => _sharApp('weibo')}>
            <Image style={styles.thridIcon} source={iconWeibo}/>
            <View style={styles.titleBox}><Text style={styles.titleText}>微博</Text></View>
          </TouchableOpacity>
        </View>
        <View style={styles.itemBox}>
          <TouchableOpacity onPress={() => _sharApp('timeline')}>
            <Image style={styles.thridIcon} source={iconTimeline}/>
            <View style={styles.titleBox}><Text style={styles.titleText}>朋友圈</Text></View>
          </TouchableOpacity>
        </View>
        <View style={styles.itemBox}>
          <TouchableOpacity onPress={() => _sharApp('qq')}>
            <Image style={styles.thridIcon} source={iconQQ}/>
            <View style={styles.titleBox}><Text style={styles.titleText}>QQ</Text></View>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}

export default ShareBox